<template>
	
	<el-divider>多重多选 start</el-divider>
	<!-- 多重多选 start -->
	<el-checkbox :indeterminate="checkDate.isChechStatus" v-model="checkDate.isCheck" @change="checkAllSX($event)">{{checkDate.name}}</el-checkbox>
	<div v-for="(item,index) in checkDate.chidren" :key="index">
		<el-checkbox :indeterminate="item.isChechStatus" v-model="item.isCheck" @change="checkAllS($event, index)">{{item.name}}</el-checkbox>		
		<el-checkbox-group v-model="item.chidren.cheGroup" @change="checkS($event, index)">
			<el-checkbox v-for="(i,k) in item.chidren.list" :key="k" :label="i">{{i}}</el-checkbox>
		</el-checkbox-group>
	</div>
	<!-- 多重多选 end-->
	<el-divider>多重多选 end</el-divider>
	
	<!-- 多选框 start -->
	<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange($event)">全选</el-checkbox>
	<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
		<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
	</el-checkbox-group>
	<!-- 多选框 end -->
	
	<!-- 输入框 start -->
	<div style="width: 300px;">
		<el-space spacer="-" v-for="(item,index) in timeBox" :key="index">
			<el-autocomplete class="inline-input" v-model="item.t1" :fetch-suggestions="querySearch" 
			 placeholder="起始时间" style="width: 100px;" size="mini" ></el-autocomplete>
			<span>
				<el-autocomplete class="inline-input" v-model="item.t2" :fetch-suggestions="querySearch"
				 placeholder="结束时间" style="width: 100px;" size="mini" ></el-autocomplete>
				<el-button size="mini" @click="addT" v-if="index == 0">+</el-button>
				<el-button size="mini" @click="delT(index)" v-else> - </el-button>
			</span>
		</el-space>
	</div>
	<!-- 输入框 end -->
	
</template>

<script>
export default {
	data() {
		// 输入框
		const querySearch = (queryString, cb) => {
			let data = [
				{value: '08:30'},	{value: '08:45'},
				{value: '09:00'},	{value: '09:15'},	{value: '09:30'},	{value: '09:45'},
				{value: '10:00'},	{value: '10:15'},	{value: '10:30'},	{value: '10:45'},
				{value: '11:00'},	{value: '11:15'},	{value: '11:30'},	{value: '11:45'},
				{value: '12:00'},	{value: '12:15'},	{value: '12:30'},	{value: '12:45'},
				{value: '13:00'},	{value: '13:15'},	{value: '13:30'},	{value: '13:45'},
				{value: '14:00'},	{value: '14:15'},	{value: '14:30'},	{value: '14:45'},
				{value: '15:00'},	{value: '15:15'},	{value: '15:30'},	{value: '15:45'},
				{value: '16:00'},	{value: '16:15'},	{value: '16:30'},	{value: '16:45'},
				{value: '17:00'},	{value: '17:15'},	{value: '17:30'},	{value: '17:45'},
				{value: '18:00'},	{value: '18:15'},	{value: '18:30'}
			]
			cb(data);
		};
		return {
			// 多选框
			checkAll: false,
			isIndeterminate: true,
			checkedCities: ['上海', '北京'],
			cities: ['上海', '北京', '广州', '深圳'],
			// 多重多选
			checkDate: {
				name: '最高全选',
				isCheck: false,
				isChechStatus: true,
				chidren: [
					{
						name: '全选',
						isCheck: false,
						isChechStatus: true,
						chidren: {
							cheGroup: ['上海', '北京'],
							list: ['上海', '北京', '广州', '深圳'],
						}
					},
					{
						name: '全选',
						isCheck: false,
						isChechStatus: true,
						chidren: {
							cheGroup: ['上海', '北京'],
							list: ['上海', '北京', '广州', '深圳'],
						}
					}
				]
			},
			// 输入框
			timeBox: [{"t1": '','t2': ''}],
			querySearch,
		}
	},


	methods:{
		// 多重多选
		checkAllSX(val){
			console.log('checkAllSX','最高全选')
			
			this.checkDate.isChechStatus = false
			this.checkDate.chidren.forEach((item,index) => {
				this.checkS(val ? item.chidren.list : [], index)
			})
		},
		checkAllS(val,key){
			console.log('checkAllS', '全选')
			
			let urlInfo = this.checkDate.chidren[key]
			urlInfo.isChechStatus = false;
			urlInfo.chidren.cheGroup = val ? urlInfo.chidren.list : [];
			
			// 最高全选
			let info = 0;
			this.checkDate.chidren.forEach(item => {
				if(item.isCheck) info++
			})
			
			console.log(this.checkDate.chidren.length)
			if(this.checkDate.chidren.length == info){
				this.checkDate.isChechStatus = false
				this.checkDate.isCheck = true
			}else if(this.checkDate.chidren.length === 0){
				this.checkDate.isChechStatus = false
			}else{
				this.checkDate.isChechStatus = true
				this.checkDate.isCheck = false
			}
		},
		checkS(val,key){
			console.log('checkS，单选框')
			
			let checkedCount = val.length;
			let urlInfo = this.checkDate.chidren[key]
			urlInfo.isCheck = checkedCount === urlInfo.chidren.cheGroup.length;
			urlInfo.isChechStatus = checkedCount > 0 && checkedCount < urlInfo.chidren.cheGroup.length;
		},
		
		
		// 多选框  全选/单选
		handleCheckAllChange(val) {
			console.log('全选',val)  // √-true  口-false
			this.checkedCities = val ? this.cities : [];
			this.isIndeterminate = false;
		},
		handleCheckedCitiesChange(value) {
			console.log('多选',value)  // ["广州", "北京"]
			let checkedCount = value.length;
			this.checkAll = checkedCount === this.cities.length;
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
		},
		
		
		// 输入框
		addT(){
			this.timeBox.push({"t1": '','t2': ''})
		},
		delT(id){
			this.timeBox.splice(id,1)
		},
	},
}
</script>